<template>
    <div class="">
        <van-nav-bar
            left-arrow
            @click-left="$router.push('/')"
            fixed>
        </van-nav-bar>
        <p>短信登录</p>
        <van-form @submit="onSubmit">
            <van-field
                @keydown.enter="null"
                @keyup.enter="null"
                class="input"
                v-model.trim="phone"
                name="phone"
                type="number"
                placeholder="请输入手机号"
                :rules="phoneRules"
            />
            <van-field
                class="input"
                v-model.trim="code"
                name="code"
                type="number"
                placeholder="请输入验证码"
                :rules="codeRules"
            >
                <template #button>
                    <div v-if="isLock" class="codeBtn time">{{ time }}</div>
                    <van-button v-else class="codeBtn" @click="pushCode" @keydown.enter="null" size="small"
                                type="primary">
                        发送验证码
                    </van-button>
                </template>
            </van-field>
            <div class="div">
                <van-button class="btn" block type="info" @click="submit" native-type="submit">登录</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { getCode, getLogin } from '@/api/user'
import { setRefToken, setToken } from '@/utils/storage'

export default {
    data () {
        return {
            phone: '',
            code: '',
            phoneRules: [
                { required: true, message: '请输入手机号' },
                { pattern: this.reg, message: '请检查手机号是否正确' }
            ],
            codeRules: [
                { required: true, message: '请输入验证码' },
                { pattern: /^\d{6}$/, message: '请检查验证码是否正确' }
            ],
            // 控制验证码按钮的样式
            isLock: false,
            time: 60,
            error: false,
            errorMessage: '',
            reg: /^(?:(?:\+|00)86)?1\d{10}$/
        }
    },
    methods: {
        async pushCode () {
            if (this.reg.test(this.phone)) {
                this.isLock = true

                try {
                    await getCode(this.phone)
                } catch (err) {
                    this.$toast.fail(err.response.data.message)
                }

                const timeId = setInterval(() => {
                    this.time--
                }, 1000)
                setTimeout(() => {
                    clearInterval(timeId)
                    this.isLock = false
                    this.time = 60
                }, 60000)
            } else {
                this.codeRules = []
            }
        },
        submit () {
            this.codeRules = [
                { required: true, message: '请输入验证码' },
                { pattern: /^\d{6}$/, message: '请检查验证码是否正确' }
            ]
        },
        async onSubmit (values) {
            const res = await getLogin({
                mobile: values.phone,
                code: values.code
            })
            setToken(res.data.data.token)
            setRefToken(res.data.data.refresh_token)
            if (res.status === 201) this.$router.push('/')
        }
    }
}
</script>

<style scoped>
p {
    font-size: 28px;
    color: #333333;
    font-weight: 600;
    margin: 54px 0 0 32px;
}

.input {
    padding: 38px 32px 20px;
}

.codeBtn {
    height: 14px;
    font-size: 14px;
    color: #595769;
    background-color: transparent;
    border: none;
}

.time {
    color: #A5A6AB;
}

.div {
    display: flex;
    justify-content: center;
}

.btn {
    width: 309px;
    height: 50px;
    background-image: linear-gradient(90deg, #FC6627 0, #FE4F4F 100%);
    border: none;
    margin-top: 38px;
}
</style>
